<script>
import AchievementBadge from './utils/AchievementBadge.vue'
import InterestPortrait from './utils/InterestPortrait.vue'
export default {
  components: {
    AchievementBadge, InterestPortrait
  }
}
</script>
<template>
  <div class="out">
    <div class="content">
      <!-- 兴趣比例 -->
      <div class="interest moudule left">
        <InterestPortrait></InterestPortrait>
      </div>
      <!-- 勋章墙 -->
      <div class="medal moudule left">
        <AchievementBadge></AchievementBadge>
      </div>
      <!-- 人物 -->
      <div class="people moudule right">
        <img src="@/assets/people/woman.png" alt="" style="width: 600px; height: 400px;">
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.out {
  position: fixed;
  bottom: 0px;
  top: 80px;
  left: 0px;
  right: 0px;
  background: linear-gradient(
    to bottom,
    rgb(255, 255, 255),
    rgb(195, 193, 193)
  );
  .content {
    width: 92%;
    margin: 0 auto;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    .moudule {
      width: 32%;
      height: 700px;
    }
    .left {
      display: inline-block;
      -moz-box-shadow: 2px 2px 13px #333333;
      -webkit-box-shadow: 2px 2px 13px #333333;
      box-shadow: 2px 2px 13px #333333;
      border-radius: 2%;
      box-sizing: border-box;
    }
    .right{
        line-height: 700px;
    }
  }
}
</style>
